<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>专属导购</title>
<link rel="stylesheet" type="text/css" href="css/lib/swiper.min.css"/>
<link rel="stylesheet" type="text/css" href="css/lib/doumee.css"/>
<link rel="stylesheet" type="text/css" href="css/public.css"/>
<link rel="stylesheet" type="text/css" href="css/lib/dialog.css"/>
<link rel="stylesheet" type="text/css" href="css/home.css"/>
<script src="js/lib/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/swiper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/vue-2.5.17.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/doumee.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/dialog.js" type="text/javascript" charset="utf-8"></script>
<script src="js/data.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>

<footer class="footer flex-row top-line main-line" id="threeMod">
	<dl class="flex-full flex-row left-line">
		<dt class="icon-2">
			<img src="image/icon/contact-icon.png" />
		</dt>
		<dd>联系</dd>
	</dl>
	<dl class="flex-full flex-row left-line" @click="help($event)">
		<dt class="icon-3">
			<img src="image/icon/help-icon.png" />
		</dt>
		<dd>125</dd>
	</dl>
</footer>

<div class="swiper-container Main" id="Main">
	<div class="swiper-wrapper">
		<div class="swiper-slide content">
			
			<div class="children">
				
				<div class="guideMod top-line bg-w" id="mainGuide">
					<ul class="flex-row list top-line" v-for="(item,index) in guideData" v-if="index == 3">
						<li class="cover pt">
							<img :src="item.photo" />
						</li>
						<li class="flex-full info flex-col">
							<div class="namebox dm-clearfix">
								<h5 class="name dm-left">{{item.name}}</h5>
							</div>
							<div class="store h6 dm-wrap">{{item.store}}</div>
						</li>
						<li class="btn flex-row">
							<input type="button" value="导购微信" class="btn-2" />
						</li>
					</ul>
				</div>
				
				<div class="dm-norlist bg-w dm-mb">
					<ul class="list bottom-line flex-row arrow">
						<li class="flex-full cot dm-wrap">安徽省合肥市蜀山区西湖国际广场C座</li>
					</ul>
					<ul class="list flex-row arrow" onclick="location.href='guideMod.html'">
						<li class="name">关联导购</li>
						<li class="flex-full cot tr">28</li>
					</ul>
				</div>
				
				<div class="aboutCase bg-w">
					<div class="dm-title bottom-line"><span>关联案例</span></div>
					<div class="case-box dm-clearfix">
						<a href="caseDetail.html" class="box dm-left cover" v-for="item in caseData" data-rate='1'>
							<img :src="item.cover" />
						</a>
					</div>
				</div>
				
			</div>
			
		</div>
	</div>
</div>


<script type="text/javascript">

//主模块
var vm = new Vue({
	el:'#Main',
	data:{
		guideData:testData.guider,
		caseData:testData.case
	},
	mounted:function(){
		pullSwiper('#Main',true);
	},
	created:function(){
		imgRate();
	},
});

//底部按钮
var threeMod = new Vue({
	el:"#threeMod",
	methods:{
		//赞
		help:function(e){
			var target = e.currentTarget;
			if(target.className.indexOf('on') < 0){
				target.className = 'flex-full flex-row left-line on';
				target.children[1].innerHTML ++;
				tip('已赞');
			}else{
				target.className = 'flex-full flex-row left-line';
				target.children[1].innerHTML --;
				tip('取消赞');
			};
		}
	}
});

//上拉加载
function reload(pull){
	pull.innerHTML = '已加载全部数据';
};

</script>

</body>
</html>
